<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="广告筛选" :visible.sync="dialogVisible" @close="resetForm('timeRankForm')" width="400px">
        <el-form label-position="top" size="small" :model="timeRankForm" :hide-required-asterisk='true' ref="timeRankForm" :rules="timeRankRules" class="dialog_form">
            <el-form-item label="当前消耗" prop="">
                <div class="flexbox flexcenter">
                    <el-form-item label="" prop="stat_cost_left">
                        <el-input v-model="timeRankForm.stat_cost_left" placeholder="请输入"></el-input>
                    </el-form-item>
                    <span style="margin:0 15px">-</span>
                    <el-form-item label="" prop="stat_cost_right">
                        <el-input v-model="timeRankForm.stat_cost_right" placeholder="请输入"></el-input>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item label="当前ROI" prop="">
                <div class="flexbox flexcenter">
                    <el-form-item label="" prop="pay_order_roi_left">
                        <el-input v-model="timeRankForm.pay_order_roi_left" placeholder="请输入"></el-input>
                    </el-form-item>
                    <span style="margin:0 15px">-</span>
                    <el-form-item label="" prop="pay_order_roi_right">
                        <el-input v-model="timeRankForm.pay_order_roi_right" placeholder="请输入"></el-input>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item label="时段消耗" prop="">
                <div class="flexbox flexcenter">
                    <el-form-item label="" prop="segmentation_cost_left">
                        <el-input v-model="timeRankForm.segmentation_cost_left" placeholder="请输入"></el-input>
                    </el-form-item>
                    <span style="margin:0 15px">-</span>
                    <el-form-item label="" prop="segmentation_cost_right">
                        <el-input v-model="timeRankForm.segmentation_cost_right" placeholder="请输入"></el-input>
                    </el-form-item>
                </div>
            </el-form-item>
            <el-form-item label="时段ROI" prop="">
                <div class="flexbox flexcenter">
                    <el-form-item label="" prop="segmentation_roi_left">
                        <el-input v-model="timeRankForm.segmentation_roi_left" placeholder="请输入"></el-input>
                    </el-form-item>
                    <span style="margin:0 15px">-</span>
                    <el-form-item label="" prop="segmentation_roi_right">
                        <el-input v-model="timeRankForm.segmentation_roi_right" placeholder="请输入"></el-input>
                    </el-form-item>
                </div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('timeRankForm')" class="el-button-width">重 置</el-button>
            <el-button size="small" type="primary" @click="submitForm('timeRankForm')" :disabled="loading" :loading="loading" class="el-button-width">筛 选</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            timeRankForm: {
                stat_cost_left: "",
                stat_cost_right: "",
                pay_order_roi_left: "",
                pay_order_roi_right: "",
                segmentation_cost_left: "",
                segmentation_cost_right: "",
                segmentation_roi_left: "",
                segmentation_roi_right: "",
            },
            timeRankRules: {
                // stat_cost_left: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // stat_cost_right: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // pay_order_roi_left: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // pay_order_roi_right: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // segmentation_cost_left: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // segmentation_cost_right: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // segmentation_roi_left: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
                // segmentation_roi_right: [
                //     { required: true, message: "请输入", trigger: ["blur", "change"], },
                // ],
            },
        };
    },
    created() {
        this.$bus.on("adverRank", (value) => {
            this.dialogVisible = value.dialogVsb;
        });
    },
    methods: {
        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let stat_cost = [this.timeRankForm.stat_cost_left,this.timeRankForm.stat_cost_right].filter(Boolean)
                    let pay_order_roi = [this.timeRankForm.pay_order_roi_left,this.timeRankForm.pay_order_roi_right].filter(Boolean)
                    let segmentation_cost = [this.timeRankForm.segmentation_cost_left,this.timeRankForm.segmentation_cost_right].filter(Boolean)
                    let segmentation_roi = [this.timeRankForm.segmentation_roi_left,this.timeRankForm.segmentation_roi_right].filter(Boolean)
                    this.$parent.queryInfo.stat_cost = stat_cost.length==1?[]:stat_cost
                    this.$parent.queryInfo.pay_order_roi = pay_order_roi.length==1?[]:pay_order_roi
                    this.$parent.queryInfo.segmentation_cost = segmentation_cost.length==1?[]:segmentation_cost
                    this.$parent.queryInfo.segmentation_roi = segmentation_roi.length==1?[]:segmentation_roi
                    this.$parent.getDataList(1)
                    this.dialogVisible = false;
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.timeRankForm.stat_cost_left = ''
            this.timeRankForm.stat_cost_right = ''
            this.timeRankForm.pay_order_roi_left = ''
            this.timeRankForm.pay_order_roi_right = ''
            this.timeRankForm.segmentation_cost_left = ''
            this.timeRankForm.segmentation_cost_right = ''
            this.timeRankForm.segmentation_roi_left = ''
            this.timeRankForm.segmentation_roi_right = ''
            // this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
</style>
